<template>
  <div :class="[selectIndex===i?'active':'']" class="bg-[#f5f6fa] rounded-6 mb-8 overflow-hidden" v-for="(item, i) in list" :key="i" @click="changeTimeType(i)">
    <div v-if="i === 0">
      <div class="px-12 py-12 c-[#3d8ffd]">选择期望赴馆日期(可选三个日期)</div>
      <div v-for="(childItem, index) in item.timeList" :key="index" class="flex items-center justify-between p-10 bg-[#f5f6fa] rounded-6">
        <div @click="openDateTime(index)">
          <span class="text-13 c-[#000]">{{  childItem.date?childItem.date:'选择期望赴馆日期' }}</span>
        </div>
        <div @click="openPeriodTime(index)">
          <span class="text-13 c-[#000]">{{  periodText(childItem.period)?periodText(childItem.period):'选择时间段' }}</span>
        </div>
        <!-- <div class="flex items-center">
          <Right width="12" class="relative top--1" color="#999" />
        </div> -->
      </div>
    </div>
    <div v-if="i>0" class="px-12 py-12">{{ item.text }}</div>
    <div v-if="selectIndex === 2 && i === 2">
      <nut-textarea v-model="item.remark" placeholder="请输入其他的赴馆时间备注" />
    </div>
  </div>
  <datePick ref="selectTravelTime" @confirm="confirmTime" />
  <popUp ref="periodPopUp" :columns="periodColumns" @confirm="confirmPeriod" />
</template>
<script setup>
import { Edit, Plus, Del, Right } from '@nutui/icons-vue';
import { ref, defineExpose } from 'vue'
import { isEmpty } from '@/utils'
import { showToast } from '@nutui/nutui';
import { isEmptyObject } from '@/utils/common/is.js'
import { useVisaStore } from '@/store/modules/visa/index.js'

// 0整天 1上午 2下午
const periodColumns = ref([
  { value: 0, text: '整天' },
  { value: 1, text: '上午' },
  { value: 2, text: '下午' },
])
const list = ref([
  { id: 1, text: '', timeList: [{ date: '', period: '', periodText: '' }, { date: '', period: '', periodText: '' }, { date: '', period: '', periodText: '' }] },
  { id: 2, text: '近三十天内任意时间均可前往' },
  { id: 3, text: '近30天内均无法前往', remark: '' }
])
let selectDateIndex = 0
const selectTravelTime = ref('')
const openDateTime = (index) => {
  selectDateIndex = index
  selectTravelTime.value.open()
}
const periodPopUp = ref('')
const openPeriodTime = (index) => {
  selectDateIndex = index
  periodPopUp.value.open()
}
const selectIndex = ref(0)
const changeTimeType = (index) => {
  selectIndex.value = index
}
const confirmTime = (val) => {
  console.log('%c [ val ]-32', 'font-size:13px; background:#634603; color:#a78a47;', val)
  list.value.forEach((value, index, array) => {
    if (index === 0) {
      let timeList = value.timeList;
      timeList[selectDateIndex].date = val
    }
  })
}
const confirmPeriod = (obj) => {
  list.value.forEach((value, index, array) => {
    if (index === 0) {
      let timeList = value.timeList;
      timeList[selectDateIndex].period = obj.selectedOptions[0].value
      timeList[selectDateIndex].periodText = obj.selectedOptions[0].text
    }
  })
}
const validate = async () => {
  if (selectIndex.value === 0) {
    let allMeet = list.value[0].timeList.filter((val) => {
      return !isEmpty(val.date) && !isEmpty(val.period)
    })
    if (!allMeet.length) {
      showToast.text('请选择赴馆时间和时间段!');
      return false
    }
    let onlyOneMeet = list.value[0].timeList.filter((val) => {
      return !isEmpty(val.date) || !isEmpty(val.period)
    })
    if (allMeet.length !== onlyOneMeet.length) {
      showToast.text('请选择赴馆时间和时间段!');
      return false
    }
    return true
  } else if (selectIndex.value === 1) {
    return true
  } else if (selectIndex.value === 2) {
    if (isEmpty(list.value[2].remark)) {
      showToast.text('请输入其他的赴馆时间备注!');
    }
  }
}
const getList = () => {
  return {
    date_choice: selectIndex.value,
    list: list.value[0].timeList.filter((val) => {
      return !isEmpty(val.date) && !isEmpty(val.period)
    }),
    other_date: list.value[2].remark
  }
}
const init = () => {
  let identityMaterial = !isEmptyObject(useVisaStore().identityMaterial) ? useVisaStore().identityMaterial : (window.localStorage.getItem('identityMaterial') && JSON.parse(window.localStorage.getItem('identityMaterial')))
  console.log('%c [ identityMaterial ]-113', 'font-size:13px; background:#622581; color:#a669c5;', identityMaterial)
  selectIndex.value = identityMaterial.date_choice
  if (identityMaterial.date_choice === 0) {
    let timeList = [...identityMaterial.preferred_date, ...list.value[0].timeList]
    list.value[0].timeList = timeList.slice(0, 3)
    console.log('%c [ list ]-117', 'font-size:13px; background:#d4b367; color:#fff7ab;', list)
  }
}
const periodText = (val) => {
  let obj = {
    0: '整天',
    1: '上午',
    2: '下午',
  }
  return obj[val]
}
init()
defineExpose({ validate, getList })
</script>

<style lang="scss" scoped>
.active {
  border: 1px solid #3d8ffd !important;
}
</style>